<template>
  <div class="report-page">
    <x-header>举报</x-header>
    <checklist label-position="left" :options="checkList" v-model="checkedList"></checklist>
    <div class="tips">
      <p>1、我们支持有确实证据的举报。</p>
      <p>2、我们反对恶意举报，恶意举报者会受到对等处罚。</p>
    </div>
    <x-button class="back-btn" type="primary" @click.native="show=true">举报</x-button>
    <confirm v-model="show"
      title="举报提醒"
      @on-cancel="show=false"
      @on-confirm="handleReport">
        <div style="text-align:left;">
          1、如果您的举报被核实，我们将依规对举报者进行处罚。<br>
          2、如果被核为恶意举报，我们将依规对您进行对等处罚。
        </div>
      </confirm>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import {
  XHeader,
  XButton,
  Confirm,
  Checklist
} from 'vux';
const HomeStore = namespace('home');

@Component({
  components: {
    XHeader,
    Confirm,
    XButton,
    Checklist
  }
})

export default class ReportPage extends Vue {
  @HomeStore.Action saveReport;
  @HomeStore.State reportRes;
  show = false
  checkedList = []
  checkList = ['垃圾营销', '不实信息', '有害信息', '违法信息', '淫秽色情', '人身攻击我', '抄袭我的内容', '违规有奖活动']
  handleReport () {
    if (this.checkedList.length > 0) {
      let info = this.$route.query && this.$route.query.info
      let msg = this.checkedList.join('-')
      let user = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
      let params = {
        type: info.type || 'post',
        targetId: info._id, // userId, msgId, postId等,
        beReported: info.creator,
        beReportedId: (info.creator || {})._id,
        msg,
        reportId: user._id
      }
      this.saveReport(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('举报成功', 'middle');
          this.$router.go(-1)
        }
      })
    } else {
      this.$vux.toast.text('请选择举报内容', 'middle');
    }
  }
  created () {
    this.show = false
    this.checkedList = []
  }
}
</script>
<style lang="less">
  .report-page {
    padding-top: 51px;
    .back-btn {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    .tips {
      background: #ffffff;
      margin: 5px auto;
      padding: 20px;
    }
  }
</style>
